<template>
  <div>
    <a-form>
      <h3 v-text="formData.title"></h3>
      <a-form-item v-for="formItem in formData.items"
        :key="formItem.fieldId"
        :label="formItem.fieldName"
        :labelCol="formData.labelCol"
        :wrapperCol="formData.wrapperCol"
        :hasFeedback="true"
        :validateStatus="$store.getters.formStatus[formItem.fieldId]"
        :help="$store.getters.helps[formItem.fieldId]"
        :required="formItem.required">
        <component :is="fieldTypeComponents[formItem.fieldType]"
          :fieldId="formItem.fieldId"
          :option="formItem.objectField"
          :defaultHelp="formItem.help"
          @change="value => handleChange(formItem.fieldId, value)"></component>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import Text from './form/Text'
import Radio from './form/Radio'
import Checkbox from './form/Checkbox'
import Textarea from './form/Textarea'
import Integer from './form/Integer'
import RealNumber from './form/Number'
import Currency from './form/Currency'
import IDate from './form/Date'
import Telephone from './form/Telephone'
import Email from './form/Email'
import Url from './form/Url'
import File from './form/File'
import Picture from './form/Picture'
import Percent from './form/Percent'
import IBoolean from './form/Boolean'
const fieldTypeComponents = {
  text: Text,
  radio: Radio,
  checkbox: Checkbox,
  textarea: Textarea,
  integer: Integer,
  number: RealNumber,
  currency: Currency,
  date: IDate,
  telephone: Telephone,
  email: Email,
  url: Url,
  file: File,
  picture: Picture,
  percent: Percent,
  boolean: IBoolean,
}
export default {
  name: 'IForm',
  props: {
    formData: {
      requried: true,
      type: Object
    }
  },
  created() {
    const formStatus = {};
    const helps = {};
    this.formData.items.forEach(item => {
      formStatus[item.fieldId] = undefined;
      helps[item.fieldId] = item.help;
    });
    this.$store.dispatch('initFormStatus', formStatus);
    this.$store.dispatch('initHelps', helps);
  },
  data() {
    return {
      fieldTypeComponents: fieldTypeComponents
    };
  },
  methods: {
    handleChange(fieldId, value) {
      console.log(fieldId + ": " + value);
    }
  }
}
</script>

<style scoped>

</style>